<template>
	<view>
		<view class="top" @click="searchShow()">
			<u-search shape="round" placeholder="输入关键词进行搜索" :show-action="false"></u-search>
		</view>
		
		<view class="data-item">
			<view class="title">
				<text>分销名称：晶晶</text>
			</view>
			<view class="cons">
			       <ul>
					   <li>
					   	<view class="titles">
					   		所属店长：艳艳
					   	</view>
					   </li>
				   </ul>  
				   <ul>
				   					   <li>
				   					   	<view class="titles">
				   					   		分销编码：S0000000P03N
				   					   	</view>
				   					   </li>
									   <li>
									   	<view class="titles">
									   		分销级别：店长
									   	</view>
									   </li>
				   </ul>  
					<ul>
						<li>
							<view class="titles">
								销售单数：9
							</view>
						</li>
						
						<li>
							<view class="titles">
								销售金额：739元
							</view>
						</li>
				
						<li>
							<view class="titles">
								上交金额：688元
							</view>
						</li>
						
						
					
					</ul>
				
			</view>
		</view>
		
	<u-popup :show="showyy" closeOnClickOverlay mode="top" round="8" @close="showyy=false">
				<view class="showBlock">
					<view>所属分销:<text @click="show2 = true">{{fxname}}</text></view>
					<view>团品开始日期:<text @click="show = true">{{startTime}}</text></view>
					<view>团品结束日期:<text @click="showEnd = true">{{endTime}}</text></view>
					<view class="btn">
						<text @click="reset()">重置</text>
						<text @click="search()">搜索</text>
					</view>
				</view>
			</u-popup>
		<u-picker :show="show2" :columns="columns2" @confirm="confirm2" @cancel="cancelChoose2"></u-picker>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value" mode="date" :formatter="formatter"
			@confirm="confirm" @cancel="cancel"></u-datetime-picker>
			<u-datetime-picker ref="datetimePicker" :show="showEnd" v-model="value2" mode="date" :formatter="formatter"
				@confirm="confirmEnd" @cancel="cancelEnd"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
              showyy:false,
			  columns2: [
			      ['中国', '美国', '日本']
			  ],
			  show2:false,
			  fxname:'请选择分销名称',
			  startTime:'请选择团品开始日期',
			   endTime:'请选择团品结束日期',
			  show: false,
			value: Number(new Date()),
			showEnd: false,
			value2: Number(new Date()),
			}
		},
		methods: {
          searchShow(){
			  console.log('666666')
			  this.showyy=true
		  },
		  confirm2(e) {
		                  console.log('confirm', e.value)
		                  this.show2 = false
		  		         this.fxname=e.value
		  				
		  			},
		  			cancelChoose2(){
		  				this.show2 = false
		  			},
		formatter(type, value) {
		    if (type === 'year') {
		        return `${value}年`
		    }
		    if (type === 'month') {
		        return `${value}月`
		    }
		    if (type === 'day') {
		        return `${value}日`
		    }
		    return value
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
	cancel() {
		this.show = false
	},
	confirm(e) {
		this.show = false
		console.log(e.value);
		const timeFormat = uni.$u.timeFormat;
		console.log(timeFormat(e.value, 'yyyy-mm-dd'));
		this.startTime = timeFormat(e.value, 'yyyy-mm-dd')
	
	},
	confirmEnd(e) {
		this.showEnd = false
		console.log(e.value);
		const timeFormat = uni.$u.timeFormat;
		console.log(timeFormat(e.value, 'yyyy-mm-dd'));
		this.endTime = timeFormat(e.value, 'yyyy-mm-dd')
	
	},
	cancelEnd() {
		this.showEnd = false
	},
	reset(){
		this.showyy=false
	},
	search(){
		this.showyy=false
	}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 682rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.data-title{
		width: 682rpx;
		height: auto;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		text-align: left;
		display: flex;
		padding-top: 20rpx;

		.leftIcon{
			width: 6rpx;
			height: 32rpx;
			background: #FF3B06;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			display: inline-block;
			margin: 6rpx 10rpx 5rpx 10rpx;
		}

	}
	.data-item{
		width: 682rpx;
		height: auto;
		background-color:#F9F9F9;
		border-radius:16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		.title{
			width: 100%;
			height:77rpx;
			border-bottom:1rpx solid #E9E9E9;
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			text{
				line-height: 77rpx;
				margin-right:14rpx;
				margin-left: 20rpx;
			}
		}
		.cons{
			width: auto;
			height: auto;
			margin: 0 auto;
			float: none;
			overflow: hidden;
			color: #333333;
			padding: 20rpx;
			
			ul {
				display: flex;
				flex-wrap: wrap;
			}
			
			li {
				list-style: none;
				flex: 1 0 25%;
				width: 140rpx;
				height: auto;
				text-align: left;
				margin: 0 auto;
		
			
				.titles {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height:34rpx;
					text-align: left;
					margin-top: 20rpx;
				}
			}
		}
	
	}
	.showBlock{
		width:auto;height:auto;padding: 20rpx;
		font-size: 24rpx;
		view{
			line-height:100rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			border-bottom: 1rpx solid #F5F5F5;;
		}
		view:last-child{
			border-bottom: none;
			margin-top: 100rpx;
		}
		.btn{
			width:90%;
			height: auto;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			text{
				width:300rpx;
				height:82rpx;
				line-height:82rpx;
				text-align: center;
				background-color: #FF3B06;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}
			text:first-child{
				width:300rpx;
				height:82rpx;
				line-height:82rpx;
				text-align: center;
				background-color:#F5F5F5;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #777777;
			}
		}
	}
</style>